<script setup lang='ts'>
import { ref, reactive } from "vue"
import { storeToRefs } from "pinia"
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from "element-plus"
import { Search, Minus, Plus } from '@element-plus/icons-vue'
import { useEnumStore } from "@/store/enumeration"
import { productLinkConfigAddPost } from "@/api/allProduct"

import useInstance from '@/hooks/useInstance';
import { useComListData } from "@/store/list"
const { listCollect } = storeToRefs(useComListData())
const { ProductLinkConfigStatusEnum } = storeToRefs(useEnumStore())
defineOptions({
    name: 'addProductLink'
})
const emit = defineEmits(['refresh'])
const { global } = useInstance();

const dialogBasic = ref({
    title: "新建产品链接配置",
    visible: false,
    width: 700,
    height: 400,
    showFooter: true,
    marginTop: "10vh",
})

const supplyFormRef = ref<FormInstance>()
const addSupply = reactive<any>({
    // channelCode: null, //渠道编码
    // schemeCode: '962628', //权益方案编码
    productCode: null, //产品编码
    productName: null, //产品名称
    productLink: null, //产品链接
    productCategory: null, //产品总分类
    productCategoryCode: null, //产品总分类
    environment: null, //环境
    scenario: null, // 场景
})

const rules = reactive<FormRules>({

    productCategoryCode: [
        {
            required: true,
            trigger: 'blur',
            message: "请选择产品大类"
        }
    ],
    scenario: [
        {
            required: true,
            trigger: 'blur',
            message: "请选择场景"
        }
    ],
    environment: [
        {
            required: true,
            trigger: 'blur',
            message: "请选择环境"
        }
    ],
    channelCode: [
        {
            required: true,
            trigger: 'blur',
            message: "请选择渠道编码"
        }
    ],
    schemeCode: [
        {
            required: true,
            trigger: 'blur',
            message: "请选择权益方案编码"
        }
    ],
    productCode: [
        {
            required: true,
            trigger: 'blur',
            message: "请选择产品名称"
        }
    ],
    productCategory: [
        {
            required: true,
            trigger: 'blur',
            message: "请选择产品总分类"
        }
    ],
    productLink: [
        {
            required: true,
            trigger: 'blur',
            message: "请输入产品链接"
        }
    ],


})

const productName = (val: any) => {
    const arr = listCollect.value.productList.filter((item: any) => item.productCode == val)
    if (arr && arr.length > 0) {
        addSupply.productName = arr[0].productName
    }
}
const productTotal = (val: any) => {
    const arr = listCollect.value.totalProduct.filter((item: any) => item.productCategoryCode == val)
    if (arr && arr.length > 0) {
        addSupply.productCategory = arr[0].productCategory
    }
}
//显示弹框
const show = (type: string, row?: any) => {
    global.$resetForm(supplyFormRef.value, addSupply)
    if (type === 'add') {
        dialogBasic.value.title = "新建产品链接配置"

    } else {
        dialogBasic.value.title = "产品链接配置详情"
        global.$objCopy(addSupply, row)

    }
    dialogBasic.value.visible = true
}
const onClose = () => {
    resetForm()
    dialogBasic.value.visible = false
}
const resetForm = () => {
    supplyFormRef.value?.resetFields()
}
const onConfirm = async () => {
    onClose()

}


defineExpose({
    show
})
</script>

<template>
    <SysDialog :title="dialogBasic.title" :width="dialogBasic.width" :height="dialogBasic.height"
        :show-footer="dialogBasic.showFooter" :visible="dialogBasic.visible" :margin-top="dialogBasic.marginTop"
        @on-close="onClose" @on-confirm="onConfirm">
        <template v-slot:content>
            <el-form ref="supplyFormRef" :model="addSupply" :rules="rules" label-width="120px" class="demo-ruleForm"
                status-icon>
                <el-form-item label="产品名称" prop="productCode">
                    <BlackSelect v-model:select-value="addSupply.productCode" disabled :filterable="true"
                        :options="listCollect.productList" @my-change="productName">
                    </BlackSelect>
                </el-form-item>
                <el-form-item label="产品大类" prop="productCategoryCode">
                    <BlackSelect v-model:select-value="addSupply.productCategoryCode" disabled :filterable="true"
                        :options="listCollect.totalProduct" @my-change="productTotal">
                    </BlackSelect>
                </el-form-item>
                <el-form-item label="产品链接" prop="productLink">
                    <AddInput v-model:model-value="addSupply.productLink" disabled maxlength="256" :limit="true">
                    </AddInput>
                </el-form-item>
                <el-form-item label="环境" prop="environment">
                    <BlackSelect v-model:select-value="addSupply.environment" disabled :filterable="true"
                        :options="listCollect.envList">
                    </BlackSelect>
                </el-form-item>
                <el-form-item label="场景" prop="scenario">
                    <BlackSelect v-model:select-value="addSupply.scenario" disabled :filterable="true"
                        :options="listCollect.sceneList">
                    </BlackSelect>
                </el-form-item>

                <el-form-item label="状态" prop="status">
                    <BlackSelect v-model:select-value="addSupply.status" disabled :filterable="true"
                        :options="ProductLinkConfigStatusEnum">
                    </BlackSelect>
                </el-form-item>
                <el-form-item label="备注" prop="remarks">
                    <AddInput v-model:model-value="addSupply.remarks" disabled :limit="true" maxlength="128"></AddInput>
                </el-form-item>
                <el-form-item label="附件照片">
                    <el-image style="width: 100px; height: 100px" :src="addSupply.attachmentUri" :zoom-rate="1.2" :max-scale="7"
                        :min-scale="0.2" :preview-src-list="[addSupply.attachmentUri]" :initial-index="4" fit="cover" />
                </el-form-item>
            </el-form>
        </template>
    </SysDialog>
</template>

<style lang='scss' scoped>
.demo-ruleForm {
    overflow: auto;
    max-height: 600px;
}
</style>
